<template>
	<div id='v-editstep'>
     <div class='step'>
        <div class='step-left'>实验信息</div>
        <div class='step-cen'><span class='center-line'></span><span class='center-sj'></span></div>
        <div :class='[flagData==0 ? "step-right" : "isActive"]'>页面编辑</div>
      </div>
	</div>
</template>

<script>
  export default{
    name: 'v-datePicker',
    props: {
      flagData: 0
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
#v-editstep
  .step
    display flex
    justify-content center
    font-size 16px
    align-items center;
    margin 30px 0
    .step-left
      width 120px
      height 40px
      border-radius 25px
      background #016DFB
      text-align center
      line-height 40px
      color #fff
    .step-right
      width 120px
      height 40px
      color #016DFB
      text-align center
      line-height 40px
      border:1px solid #016DFB
      border-radius 25px
    .isActive
      width 120px
      height 40px
      border-radius 25px
      background #016DFB
      text-align center
      line-height 40px
      color #fff
    .step-cen
      display flex
      justify-content  center
      align-items center
      margin 0 30px
      .center-line
        width 50px
        height 2px
        background #D8DCE5
        display block
      .center-sj
        width 0
        height 0
        border-top 8px solid transparent
        border-left 14px solid #D8DCE5
        border-bottom 8px solid transparent
        display block
</style>
